<template>
  <div>
    <div style="width:100%;display:flex">
      <el-card class="card1" style="width:40%">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="使用单位" label-width="100px">
            <el-input v-model="form.useOrgName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getuseData" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="card1" style="margin-left:15px;width:60%">
        <el-form :model="form" :inline="true" size="small">
          <el-form-item label="设备注册代码" label-width="100px">
            <el-input v-model="form.eleCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="有无物联网电梯" label-width="100px">
            <el-select v-model="form.isIot" placeholder="请选择" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="geteleData(useOrgId)" size="small">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div style="display:flex">
      <el-card class="card2">
        <div slot="header" class="clearfix">
          <span>使用单位列表</span>

        </div>
        <div class="text">
          <p style="font-weight:800">电梯总数: <span style="color:red">{{eleTotal}}</span> 物联网电梯数: <span style="color:red">{{iotEleTotal}}</span></p>
          <el-table :data="userData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
            <el-table-column label="单位" show-overflow-tooltip width="240">
              <template slot-scope="scope">
                <el-button type='text' @click="selectOrg(scope.row.useOrgId)">
                  {{scope.row.orgName}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="maintEleTotal" label="梯数">
            </el-table-column>
            <el-table-column prop="eleIotTotal" label="物联网电梯数">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="usehandleSizeChange" @current-change="usehandleCurrentChange" :current-page.sync="usepagination.pageNum"
            :page-size="usepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="usepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
      <el-card class="card3">
        <div slot="header" class="clearfix">
          <span>电梯信息列表</span>
        </div>
        <div class="text">
          <el-table :data="eleData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
            <el-table-column label="设备注册代码" prop="eleCode" width="200">
            </el-table-column>
            <el-table-column prop="eleFailureTotal" label="	故障总数">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size='small' @click="showDailog(scope.row.eleCode)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination @size-change="elehandleSizeChange" @current-change="elehandleCurrentChange" :current-page.sync="elepagination.pageNum"
            :page-size="elepagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="elepagination.pageTotal">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog title="故障数据列表" :visible.sync="dialogVisible" width="58%" :before-close="handleClose">
      <el-dialog width="45%" title="电梯故障详情" :visible.sync="innerVisible" append-to-body class="infodata">
        <el-card>
          <table>
            <tr>
              <td>设备注册代码:</td>
              <td>{{eleInfo.eleCode}}</td>
            </tr>
            <tr>
              <td>使用单位:</td>
              <td>{{eleInfo.useOrgName}}</td>
            </tr>
            <tr>
              <td>设备地址:</td>
              <td>{{eleInfo.eleUseCommunity}}</td>
            </tr>
          </table>
        </el-card>
        <el-card style="margin-top:15px">
          <table>
            <tr>
              <td>故障发生时间:</td>
              <td>{{faultInfo.faultTime}}</td>
            </tr>
            <tr>
              <td>故障描述:</td>
              <td>{{faultInfo.eventName}}</td>
            </tr>
          </table>
        </el-card>
        <div style="display:flex;justify-content: space-between;">
          <el-card style="width:49%">
            <table>
              <tr>
                <td style="width:40%">处置状态:</td>
                <td>{{faultInfo.failureStatus}}</td>
              </tr>
              <tr>
                <td>处置时间:</td>
                <td>{{faultInfo.handleTime}}</td>
              </tr>
              <tr>
                <td>处置人员:</td>
                <td>{{faultInfo.handleUser}}</td>
              </tr>
              <tr>
                <td>处置描述:</td>
                <td>{{faultInfo.handleRemark}}</td>
              </tr>
            </table>
          </el-card>
          <el-card style="width:49%">
            <table>
              <tr>
                <td style="width:60%">总接触器状态:</td>
                <td>{{runInfo.maincontactor}}</td>
              </tr>
              <tr>
                <td>运行接触器状态:</td>
                <td>{{runInfo.runcontactor}}</td>
              </tr>
              <tr>
                <td>安全回路状态:</td>
                <td>{{runInfo.circuit}}</td>
              </tr>
              <tr>
                <td>轿厢运行状态:</td>
                <td>{{runInfo.carstatus}}</td>
              </tr>
            </table>
          </el-card>
        </div>
        <div style="display:flex;justify-content: space-between;margin-top:15px">
          <el-card style="width:49%">
            <table>
              <tr>
                <td style="width:60%">运行方向:</td>
                <td>{{runInfo.direction}}</td>
              </tr>
              <tr>
                <td>关门到位:</td>
                <td>{{runInfo.doorstatus}}</td>
              </tr>
              <tr>
                <td>当前物理楼层:</td>
                <td>{{runInfo.floor}}</td>
              </tr>
              <tr>
                <td>轿厢是否在门区:</td>
                <td>{{runInfo.iszone}}</td>
              </tr>
            </table>
          </el-card>
          <el-card style="width:49%">
            <table>
              <tr>
                <td style="width:60%">上极限是否动作:</td>
                <td>{{runInfo.uplimit}}</td>
              </tr>
              <tr>
                <td>下极限是否动作:</td>
                <td>{{runInfo.downlimit}}</td>
              </tr>
              <tr>
                <td>轿厢内是否有人:</td>
                <td>{{runInfo.passenger}}</td>
              </tr>
              <tr>
                <td>轿厢报警按钮是否动作:</td>
                <td>{{runInfo.alarm}}</td>
              </tr>
            </table>
          </el-card>
        </div>
        <el-card style="margin-top:15px">
          <table>
            <tr>
              <td>累计运行小时数:</td>
              <td>{{runInfo.hours}}</td>
            </tr>
            <tr>
              <td>累计运行次数:</td>
              <td>{{runInfo.times}}</td>
            </tr>
          </table>
        </el-card>
      </el-dialog>
      <el-card>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
          <el-table-column label="设备注册代码" prop="eleCode" width="200">
          </el-table-column>
          <el-table-column prop="useOrgName" label="使用单位名称">
          </el-table-column>
          <el-table-column prop="faultTime" label="故障时间">
          </el-table-column>
          <el-table-column prop="faultType" label="故障类型">
          </el-table-column>
          <el-table-column prop="isTask" label="故障状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size='small' @click="showInfo(scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { getselectEleIotFailureDataListUseOrg, getselectEleIotFailureDataListEle, getselectEleIotFailureLists, getqueryIotFaultData } from '@/api/webofthings'
export default {
  data () {
    return {
      innerVisible: false,
      dialogVisible: false,
      options: [
        {
          value: 0,
          label: '无'
        },
        {
          value: 1,
          label: '有'
        }
      ],
      usepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      elepagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      userData: [],
      eleData: [

      ],
      tableData: [],
      form: {

      },
      eleTotal: '',
      iotEleTotal: '',
      useOrgId: '',
      formLabelWidth: '110px',
      code: '',
      runInfo: {},
      faultInfo: {},
      eleInfo: {}
    }
  },
  mounted () {
    this.getuseData()
  },

  methods: {
    handleClose () {
      this.dialogVisible = false
    },
    // 点击使用单位列表
    selectOrg (useOrgId) {
      this.useOrgId = useOrgId
      this.geteleData(this.useOrgId)
    },
    //获取使用单位分页数据
    getuseData () {
      const query = {
        useOrgName: this.form.useOrgName,
        pageNum: this.usepagination.pageNum,
        pageSize: this.usepagination.pageSize,
      }
      getselectEleIotFailureDataListUseOrg(query).then(res => {
        if (res.data.code == 200) {
          this.userData = res.data.data.useOrgInfo.page.list
          this.usepagination.pageTotal = res.data.data.useOrgInfo.page.total
          this.eleTotal = res.data.data.useOrgInfo.eleTotal
          this.iotEleTotal = res.data.data.useOrgInfo.iotEleTotal
          this.useOrgId = this.userData[0].useOrgId
          this.geteleData(this.useOrgId)
        }
      })
    },
    //获取电梯分页数据
    geteleData (useOrgId) {
      const query = {
        useOrgId: useOrgId,
        eleCode: this.form.eleCode,
        factoryNo: this.form.factoryNo,
        isIot: this.form.isIot,
        pageNum: this.elepagination.pageNum,
        pageSize: this.elepagination.pageSize,
      }
      getselectEleIotFailureDataListEle(query).then(res => {
        if (res.data.code == '200') {
          this.eleData = res.data.data.eleIotInfoPage.list
          this.elepagination.pageTotal = res.data.data.eleIotInfoPage.total
        }
      })
    },
    getfaultData () {
      const query = {
        eleCode: this.code,
        pageNum: this.usepagination.pageNum,
        pageSize: this.usepagination.pageSize,
      }
      getselectEleIotFailureLists(query).then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    showInfo (rows) {
      this.innerVisible = true
      const query = {
        eleCode: rows.eleCode,
        id: rows.id,
      }
      getqueryIotFaultData(query).then(res => {
        console.log(res)
        if (res.data.code == '200') {
          this.eleInfo = res.data.data.eleInfo
          this.faultInfo = res.data.data.faultInfo
          this.runInfo = res.data.data.runInfo
        }
      })
    },
    showDailog (eleCode) {
      this.code = eleCode
      this.getfaultData(this.code)
      this.dialogVisible = true
    },
    usehandleSizeChange (val) {
      this.usepagination.pageNum = 1
      this.usepagination.pageSize = val
      this.getuseData()
    },
    usehandleCurrentChange (val) {
      this.usepagination.pageNum = val
      this.getuseData()
    },
    elehandleSizeChange (val) {
      this.elepagination.pageNum = 1
      this.elepagination.pageSize = val
      this.geteleData(this.useOrgId)
    },
    elehandleCurrentChange (val) {
      this.elepagination.pageNum = val
      this.geteleData(this.useOrgId)
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.getfaultData(this.code)
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getfaultData(this.code)
    },
  }
}

</script>
<style lang="less" scoped>
.infodata {
  ::v-deep .el-dialog__body {
    background: #f0f0f0;
    padding: 20px;
    .el-card__body {
      padding: 0 20px;
      table {
        width: 100%;
        tr {
          width: 100%;
          line-height: 40px;
          border-bottom: #d2d2d2 1px solid;
          td:first-child {
            width: 20%;
            font-weight: 800;
          }
        }
      }
    }
  }
}
.el-pagination {
  margin-top: 5px;
  text-align: right;
}
::v-deep .el-card__body {
  .el-table .el-table__cell {
    padding: 5px;
  }
}
.card1 {
  margin-bottom: 15px;
  ::v-deep .el-input__inner {
    width: 160px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
::v-deep .el-card__header {
  background: #f9f9f9;
  .clearfix {
    font-weight: 800;
  }
}

.card2 {
  width: 40%;
  margin-right: 15px;
}
.card3 {
  width: 60%;
  .text {
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    ::v-deep .el-table__fixed::before {
      height: 0px;
    }
  }
}
::v-deep .el-dialog__header {
  padding: 10px 20px 10px;
}
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
</style>
